<template>
  <div
    style="
      width: 100%;
      height: 100vh;
      overflow: hidden;
    "
    :style="bg"
  >
    <!--  :style="bg" 加背景图片-->
    <!--    <div style="width: 400px; margin: 100px 100px;background-color: white" >-->
    <div class="login-form">
      <div class="title">用户登录</div>
      <el-form ref="loginForm" :model="loginForm" size="normal" :rules="rules">
        <el-form-item prop="account">
          <el-input
            prefix-icon="el-icon-user-solid"
            v-model="loginForm.account"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            prefix-icon="el-icon-lock"
            v-model="loginForm.password"
            show-password
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <div style="display: flex">
            <el-input
              prefix-icon="el-icon-key"
              v-model="loginForm.code"
              style="width: 50%"
              placeholder="请输入验证码"
            ></el-input>
            <!-- <ValidCode @input="createValidCode" /> -->
            <el-image :src="captchaUrl" class="image" @click="captcha()"/>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 100%" type="primary" @click="login(loginForm.code)"
            >登 录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import ValidCode from "../../components/ValidCode/ValidCode";
import request from "../../utils/request";

export default {
  components: {
    ValidCode,
  },
  name: "Login",
  data() {
    return {
      captchaUrl:'',
      
      loginForm: {
        account: '',
        password: '',
        code:'',
        role: 1,
      },
      rules: {
        account: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      // 加背景图片
      bg: {
        backgroundImage: "url(" + require("@/assets/bg.jpg") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
      },
    };
  },
  mounted(){
 this.captcha()
    console.log("2222");
     var t = this;
			      document.onkeydown = function(e){
              
			        if(window.event == undefined){
			          var key = e.keyCode;
			        }else{
			          var key = window.event.keyCode;
			        }
			      //enter的ASCII码是13
			        if(key == 13){
			          t.login(t.loginForm.code);//t.登录方法
                
			        }
			      }
  },

  methods: {
    captcha(){
      request.get("/getcode",{ responseType:"blob"},).then((res) =>{
        console.log(res);
        this.captchaUrl = window.URL.createObjectURL(res)
      })
    },
    login(code) {
     
      this.$refs["loginForm"].validate((valid) => {
        if (valid) {

          request.post("/user/login?code="+code, {
            account:this.loginForm.account,
            password:this.loginForm.password,
            
          }
          ).then((res) => {
            
            if (res.code === "0") {
              this.$message({
                type: "success",
                message: res.data.name+"登录成功",
              });
              sessionStorage.setItem("user", JSON.stringify(res.data)); // 缓存用户信息
              this.$router.push("/index"); //登录成功之后进行页面的跳转，跳转到主页
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              });
            }
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.login-form {
  position: absolute;
  left: 70%;
  right: 0;
  width: 350px;
  max-width: 100%;
  padding: 35px 35px 15px 35px;
  margin: 120px auto;
  transform: translate(-50%, 0);
  background-color: #ffffff;
}
.title {
  font-size: 26px;
  font-weight: 400;
  color: #596b75;
  margin: 0px auto 40px auto;
  text-align: center;
  font-weight: bold;
}
.image {
  margin-left: 10px;
  text-align: center;
  /* line-height: 37px; */
  height: 40px;
}
</style>
